<template>
	<view>
		<view class="cinema-title flex flex-direction justify-center margin-left-xl">
			<text class="text-lg">{{filmName}}</text>
			<text class="text-xs text-orange ">{{filmOtherName}}</text>
		</view>
		<view class="line">
		</view>
		<view class="prompt-nav text-center">
			<view class="icon-select">
				<i class="icon-nav iconfont text-xl margin-lr-xs icon-zuowei unavailable"></i><text>可选</text>
			</view>
			<view class="icon-select">
				<i class="icon-nav iconfont text-xl margin-lr-xs icon-yixuanzuowei select"></i><text>已选</text>
			</view>
			<view class="icon-select">
				<i class="icon-nav iconfont text-xl margin-lr-xs icon-zuowei available"></i><text>已售</text>
			</view>
		</view>
		<CinemaSeat :sold-seats="soldSeats" :selected-seats="selectedSeats" :rows="10" @selectSeat="selectHandle(arguments)" />
		<uni-card title="已选座位" class="buy-wrap" >
				<view class="flex ">
					<view class="item-wrap padding-xs margin-lr-sm" v-for="item in arrList">
						<text>{{item.row}}排{{item.colum}}座</text>
						<uni-icons @tap="closeEvt(item)" class="margin-lr-xs" type="close" size="14"></uni-icons>
					</view>
				</view>
				<view class="cu-bar bg-white tabbar border shop">
					<text class="text-xl">总价<span class="text-xs margin-left-xs text-red">{{count}}$</span></text>
					<view >
						<button class="cu-btn bg-red round shadow-blur" @click="pay">确认支付</button>
					</view>
				</view>
		</uni-card>
	</view>
</template>
<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				filmName:'',
				filmOtherName:'',
				soldSeats: [],
				sessionId: 1,
				selectedSeats: [],
				arrList:[],
				price:28,
				userId:0,
				chooseSeatIds: new Set()
			}
		},
		onLoad(options) {
			this.sessionId = options.sessionId
			this.mm()
			this.getSoldSeats()
		},
		computed: {
			count(){
		       return this.selectedSeats.length*this.price
			}
		},
		methods: {
			mm(){
				uni.getStorage({
					key:'userInfo',
					success: (res) => {
						this.userId = res.data
					}
				})
				uni.getStorage({
					key:'data',
					success:(res)=> {
						this.filmName = res.data.filmName;
						this.filmOtherName= res.data.filmOtherName;
					}
				})
			},
			//渲染页面的座位
			async getSoldSeats() {
				let res = await this.$ajax.get(`film/cinema/getSeat/${this.sessionId}`);
				if (res.code === 0) {
					this.soldSeats = res.data
				}
			},
			selectHandle(e) {
				this.selectedSeats = e[0];
				this.arrList = e[1];
				e[0].forEach(item => this.buySeat(item));
			},
			 pay() {
				let arr = []
				 this.chooseSeatIds.forEach(seatId=> {
					arr.push(this.paypay(seatId))
				})
				//等待所有请求执行完成后统一判断是否成功
		     	let p = Promise.all(arr)
				p.then(res=>{
					uni.showToast({
						title:'购买成功',
						icon:'success'
					})
					//重新渲染
					this.getSoldSeats()
				}).catch(error=>{
					uni.showToast({
						title:'购买失败',
						icon:'error'
					})
				})
			},
			async paypay(seatId) {
				let res = await this.$ajax.get(`/film/session/buy/${this.userId}/${seatId}/${this.sessionId}`)
				return res
			},
			buySeat(seatId) {
				this.chooseSeatIds.add(seatId)
			},
			closeEvt(e){
			   this.arrList = this.arrList.filter(item=>{
					if(item.row==e.row && item.colum==e.colum){
						return false
					}
					return true
				})
				this.selectedSeats=this.arrList.map(item=>100+(item.row-1)*12+item.colum);
			},
			
		}
	}
</script>
<style lang="scss" scoped>
	.cinema-title {
		width: 100%;
		height: 100upx;
	}

	.line {
		width: 80%;
		height: 1upx;
		border-top: 1px solid #dcdcdc;
		margin: 0 auto;
	}

	.prompt-nav {
		width: 100%;
		height: 80upx;
		padding: 20upx 0;
		border-bottom: 1px solid #dcdcdc;
		.icon-select{
			display: inline-block;
			i{
				width: 40upx;
				display: inline;
			}
			text{
				display: inline;
			}
		}
	}
	
	.seat-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 30px;
		margin-right: 5px;
		font-size: 12px;
		color: #666;
		border-radius: 5px;
		cursor: pointer;
	}
   .icon-nav{
	   vertical-align: middle;
   }
	.select {
		background-color: #69ba00;
	}

	.available {
		background-color: #ff0000;
	}

	.unavailable {
		background-color: #f5f5f5;
	}
	.buy-wrap{
		
	}
	.item-wrap{
		border: 1upx solid #cccccc;
	}
</style>
